<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>教师</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
</head>
<body style="background-color: #fff; ">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
                    <legend>教师信息修改窗口</legend>
                </fieldset>
                <form class="layui-form layui-form-pane" method="post" id="form">
                    <input type="hidden" name="id" th:value="${teacher.num}">
                    <!--                    隐藏域，存放classes 用于传递到父页面-->
                    <input type="hidden" id="trueBooks" name="trueBooks">

                    <div class="layui-form-item">
                        <label class="layui-form-label">教工号</label>
                        <div class="layui-input-block">
                            <input readonly type="text" name="jobNumber" lay-verify="required" autocomplete="off"
                                   placeholder="请输入教工号" class="layui-input" th:value="${teacher.num}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入姓名"
                                   class="layui-input" th:value="${teacher.name}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="required" autocomplete="off"
                                   placeholder="请输入联系方式" class="layui-input" th:value="${teacher.phone}">
                        </div>
                    </div>
                    <!--                    复选框-->
                    <div class="layui-card layui-form" lay-filter="component-form-element">
                        <div class="layui-card-header">教授课程</div>
                        <div class="layui-card-body layui-row layui-col-space10">
                            <div th:each="class : ${allBooks}" class="layui-col-md12" style="display: inline-block">
                                <input th:if="${#strings.contains(teachBooks,class)}" type="checkbox"
                                       name="teachBooks"
                                       th:title="${class}" th:value="${class}" checked>
                                <input th:unless="${#strings.contains(teachBooks,class)}" type="checkbox"
                                       name="teachBooks"
                                       th:title="${class}" th:value="${class}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide" style="padding-left: 235px">
                        <div class="layui-input-block">
                            <button type="button" id="submit" lay-filter="submit" lay-submit class="layui-btn"
                                    onclick="f1()">提 交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    //点击提交按钮
    function f1() {
        //获取所有name为chk的多选框,返回一个多选框数组
        const Books = document.getElementsByName("teachBooks");

        //把选中的多选框的值拼接成字符串
        let str = "";

        //循环多选框数组
        for (let i = 0; i < Books.length; i++) {
            //如果多选框被选中，则把值累计到str中
            if (Books[i].checked === true) {
                str += Books[i].value + ",";
            }
        }

        //弹出多选框选中的结果
        console.log("您勾选的值是：" + str);
        //将值放到隐藏域
        document.getElementById("trueBooks").value = str;
        const test = document.getElementById("trueBooks").value;
        console.log("隐藏域：", test)
    }
</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload', 'layer', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , layer = layui.layer
            , laydate = layui.laydate;

        laydate.render({
            elem: '#deadline'
            , type: 'datetime'
            , format: 'yyyy/MM/dd HH:mm'
        });

    });
</script>
</body>
</html>